import React from 'react';
import { Row, Col } from 'antd';
import UserList from './list';
import CommonListsIndex from '../../../components/CommonLists/index';
import FilterTool from '../../../components/FilterTool';
import { Tooltip } from 'antd';
import CodeLabel from '../../../components/CodeLabel';
import moment from 'moment';

class TransferLog extends CommonListsIndex {
  constructor(props) {
    super(props);
    this.api = 'transferLog';
    this.listsComponent = UserList;
    this.model_width = 400;
  }
  componentDidMount() {
  }

  getColumns = () => {
    return [
      {
        title: '操作时间',
        key: 'operation_log_create_at',
        dataIndex: 'operation_log_create_at',
        ellipsis: true,
        render: (text, record) => {
          return (
            <Tooltip title={text} placement='topLeft'>
              {text}
            </Tooltip>
          );
        }
      },
      {
        title: '功能模块',
        dataIndex: 'module',
        key: 'module',
        ellipsis: true,
        render: (text, record) => {
          return (
            <Tooltip title={text} placement='topLeft'>
              {text}
            </Tooltip>
          );
        }
      },
      {
        title: '子功能模块',
        dataIndex: 'children_module',
        key: 'children_module',
        ellipsis: true,
        render: (text, record) => {
          return (
            <Tooltip title={text} placement='topLeft'>
              {text}
            </Tooltip>
          );
        }
      },
      {
        title: '操作类型',
        key: 'action_type',
        dataIndex: 'action_type',
        ellipsis: true,
        render: (text) => {
          return <CodeLabel code='oper_type' value={text} />;
        },
      },
      {
        title: (
          <>
            {this.getFilterTitle('操作结果', [
              { value: -1, name: '全部' },
              { value: 1, name: '成功' },
              { value: 2, name: '失败' }
            ], 'operation_result', this.refreshTableFilter, [
              'value',
              'name'
            ])}
          </>
        ),
        dataIndex: 'operation_result',
        key: 'operation_result',
        ellipsis: true,
        width: 90,
        render: (text, record) => {
          return (
            <Tooltip title={text === 1 ? '成功' : '失败'} placement='topLeft'>
              {text === 1 ? '成功' : '失败'}
            </Tooltip>
          );
        }
      },
      {
        title: '操作人',
        dataIndex: 'user_name',
        key: 'user_name',
        ellipsis: true,
        render: (text, record) => {
          return (
            <Tooltip title={text} placement='topLeft'>
              {text}
            </Tooltip>
          );
        }
      },
      {
        title: '用户ID',
        dataIndex: 'operation_log_user_id',
        key: 'operation_log_user_id',
        ellipsis: true,
        render: (text, record) => {
          return (
            <Tooltip title={text} placement='topLeft'>
              {text}
            </Tooltip>
          );
        }
      },
      {
        title: 'IP',
        dataIndex: 'operation_log_ip',
        key: 'operation_log_ip',
        ellipsis: true,
        render: (text, record) => {
          return (
            <Tooltip title={text} placement='topLeft'>
              {text}
            </Tooltip>
          );
        }
      },
    ];
  };

  render() {
    const ListsComponent = this.listsComponent;
    const data = [
      {
        type: 'rangepicker',
        key: 'start',
        name: ['between_start_operation_log_create_at', 'between_end_operation_log_create_at'],
        placeholder: ['开始时间', '结束时间'],
        defaultValue: [
          moment()
            .subtract('day')
            .startOf('day')
            .format('YYYY-MM-DD HH:mm'),
          moment().format('YYYY-MM-DD HH:mm'),
        ],
        disabledDate: (current) => {
          return current && (current > moment().endOf('day') || current < moment().subtract(365, 'day'));
        },
      },
      {
        type: 'Search',
        key: 'keyword',
        name: 'keyword',
        defaultValue: '',
        placeholder: '请输入操作人|来源IP|用户ID进行搜索'
      }
    ];
    return (
      <div>
        <Row type='flex' justify='space-between' align='middle'>
          <Col span={24}>
            <FilterTool
              ref='filterTool'
              data={data}
              colNum={1}
              query={this.freshQueryList}
              refreshFilter={this.refreshFilter}
              isOnChange={true}
              refresh={this.resetList}
              justify='end'
            />
          </Col>
        </Row>
        <div className='inner-content' style={{ marginTop: '10px' }}>
          <ListsComponent
            {...this.state}
            queryList={this.freshQueryList}
            refreshTableFilter={this.refreshTableFilter}
            onChangePagination={this.onChangePagination}
            queryTableParams={this.queryTableParams}
            rowKey='operation_log_id'
            columns={this.getColumns()}
          />
        </div>
      </div>
    );
  }
}

export default TransferLog;
